<template>
  <q-breadcrumbs class="breadcrumbs flex items-center text-body2">
    <template v-for="(v,i) in breadcrumbs" :key="i">
      <q-breadcrumbs-el :class="className(i)" class="items-center no-wrap" @click="skipPath(v.path)">
        <qx-tooltip v-model="getTitle(v).title"></qx-tooltip>
      </q-breadcrumbs-el>
    </template>
  </q-breadcrumbs>
</template>

<script setup>
import { toI18nName } from 'boot/i18n'
import { isEmpty } from 'src/utils/utils'
import { tagsStores } from 'stores/tags-stores'
import { userStores } from 'stores/user-stores'
import { computed, nextTick } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()
const tagsStore = tagsStores()
const userStore = userStores()

const tagList = computed(() => tagsStore.tags)
const className = computed(() => index => index === breadcrumbs.value.length - 1 ? '' : 'cursor-pointer')

const breadcrumbs = computed(() => {
  if (['/dashboard/console', '/'].includes(route.fullPath)) return []
  if (isEmpty(userStore.breadcrumbs)) return []

  const tag = tagList.value.find(el => el.path === route.fullPath)

  if (tag && tag.parentIds !== 'Dashboard') return [userStore.breadcrumbs, tag]
  return [userStore.breadcrumbs]
})

const getTitle = tag => {
  return { title: tag[toI18nName('menuZhCn')] ?? tag[toI18nName('serviceNameZhCn')] }
}

const skipPath = path => {
  if (path === route.fullPath) return
  nextTick(async () => {
    await router.replace(path)
  })
}

</script>

<style lang="scss" scoped>
.q-breadcrumbs__el {
  max-width: 120px;
}
</style>